<template>
  <view class="container">
    <view class="page-header">
      <view class="page-title">反馈组件演示</view>
      <view class="page-desc">展示各种反馈组件和交互效果</view>
    </view>

    <!-- 提示框 -->
    <view class="section">
      <view class="section-title">提示框</view>
      <view class="demo-card">
        <view class="button-group">
          <button class="btn btn-primary" @click="showToast('success')">成功提示</button>
          <button class="btn btn-danger" @click="showToast('error')">错误提示</button>
          <button class="btn btn-warning" @click="showToast('warning')">警告提示</button>
          <button class="btn btn-info" @click="showToast('info')">信息提示</button>
        </view>
      </view>
    </view>

    <!-- 加载提示 -->
    <view class="section">
      <view class="section-title">加载提示</view>
      <view class="demo-card">
        <view class="button-group">
          <button class="btn btn-primary" @click="showLoading">显示加载</button>
          <button class="btn btn-secondary" @click="hideLoading">隐藏加载</button>
          <button class="btn btn-info" @click="showLoadingWithText">带文字加载</button>
        </view>
      </view>
    </view>

    <!-- 对话框 -->
    <view class="section">
      <view class="section-title">对话框</view>
      <view class="demo-card">
        <view class="button-group">
          <button class="btn btn-primary" @click="showAlert">警告对话框</button>
          <button class="btn btn-success" @click="showConfirm">确认对话框</button>
          <button class="btn btn-info" @click="showPrompt">输入对话框</button>
        </view>
      </view>
    </view>

    <!-- 操作菜单 -->
    <view class="section">
      <view class="section-title">操作菜单</view>
      <view class="demo-card">
        <view class="button-group">
          <button class="btn btn-primary" @click="showActionSheet">操作菜单</button>
          <button class="btn btn-secondary" @click="showActionSheetWithCancel">带取消菜单</button>
        </view>
      </view>
    </view>

    <!-- 通知栏 -->
    <view class="section">
      <view class="section-title">通知栏</view>
      <view class="demo-card">
        <view class="notification-demo">
          <view class="notification" :class="notificationType" v-if="showNotification">
            <view class="notification-icon">
              <text class="icon">{{ notificationIcon }}</text>
            </view>
            <view class="notification-content">
              <view class="notification-title">{{ notificationTitle }}</view>
              <view class="notification-desc">{{ notificationDesc }}</view>
            </view>
            <button class="notification-close" @click="hideNotification">
              <text class="close-icon">✕</text>
            </button>
          </view>
          
          <view class="button-group">
            <button class="btn btn-success" @click="showNotificationBar('success')">成功通知</button>
            <button class="btn btn-danger" @click="showNotificationBar('error')">错误通知</button>
            <button class="btn btn-warning" @click="showNotificationBar('warning')">警告通知</button>
            <button class="btn btn-info" @click="showNotificationBar('info')">信息通知</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 进度条 -->
    <view class="section">
      <view class="section-title">进度条</view>
      <view class="demo-card">
        <view class="progress-demo">
          <view class="progress-item">
            <view class="progress-label">线性进度条</view>
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: progress + '%' }"></view>
            </view>
            <view class="progress-text">{{ progress }}%</view>
          </view>
          
          <view class="progress-item">
            <view class="progress-label">圆形进度条</view>
            <view class="progress-circle">
              <view class="circle-bg"></view>
              <view class="circle-fill" :style="{ strokeDasharray: circleProgress }"></view>
              <text class="circle-text">{{ progress }}%</text>
            </view>
          </view>
          
          <view class="progress-actions">
            <button class="btn btn-primary" @click="startProgress">开始进度</button>
            <button class="btn btn-secondary" @click="resetProgress">重置进度</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 骨架屏 -->
    <view class="section">
      <view class="section-title">骨架屏</view>
      <view class="demo-card">
        <view class="skeleton-demo">
          <view class="skeleton-card" v-if="showSkeleton">
            <view class="skeleton-avatar"></view>
            <view class="skeleton-content">
              <view class="skeleton-line skeleton-title"></view>
              <view class="skeleton-line skeleton-desc"></view>
              <view class="skeleton-line skeleton-desc short"></view>
            </view>
          </view>
          
          <view class="content-card" v-else>
            <view class="content-avatar">
              <text class="avatar-text">A</text>
            </view>
            <view class="content-text">
              <view class="content-title">这是实际内容</view>
              <view class="content-desc">这里显示的是真实的内容，骨架屏已经消失</view>
            </view>
          </view>
          
          <view class="button-group">
            <button class="btn btn-primary" @click="showSkeleton = true">显示骨架屏</button>
            <button class="btn btn-secondary" @click="showSkeleton = false">显示内容</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="section">
      <view class="section-title">空状态</view>
      <view class="demo-card">
        <view class="empty-demo">
          <view class="empty-state" v-if="showEmpty">
            <view class="empty-icon">📭</view>
            <view class="empty-title">暂无数据</view>
            <view class="empty-desc">当前没有可显示的内容</view>
            <button class="btn btn-primary" @click="loadData">重新加载</button>
          </view>
          
          <view class="data-list" v-else>
            <view class="data-item" v-for="(item, index) in dataList" :key="index">
              <text>{{ item }}</text>
            </view>
          </view>
          
          <view class="button-group">
            <button class="btn btn-primary" @click="showEmpty = true">显示空状态</button>
            <button class="btn btn-secondary" @click="loadData">加载数据</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 消息气泡 -->
    <view class="section">
      <view class="section-title">消息气泡</view>
      <view class="demo-card">
        <view class="message-demo">
          <view class="message-list">
            <view class="message-item" v-for="(message, index) in messages" :key="index" :class="message.type">
              <view class="message-avatar" v-if="message.type === 'received'">
                <text class="avatar-text">U</text>
              </view>
              <view class="message-content">
                <view class="message-bubble">
                  <text class="message-text">{{ message.text }}</text>
                </view>
                <view class="message-time">{{ message.time }}</view>
              </view>
              <view class="message-avatar" v-if="message.type === 'sent'">
                <text class="avatar-text">M</text>
              </view>
            </view>
          </view>
          
          <view class="message-input">
            <input 
              class="input-field" 
              v-model="newMessage" 
              placeholder="输入消息..."
              @confirm="sendMessage"
            />
            <button class="send-btn" @click="sendMessage">发送</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'FeedbackDemo',
  data() {
    return {
      progress: 0,
      showNotification: false,
      notificationType: 'success',
      notificationTitle: '',
      notificationDesc: '',
      showSkeleton: true,
      showEmpty: true,
      dataList: [],
      newMessage: '',
      messages: [
        { type: 'received', text: '你好，有什么可以帮助你的吗？', time: '10:30' },
        { type: 'sent', text: '我想了解一下这个产品的功能', time: '10:31' },
        { type: 'received', text: '当然可以，我来为你详细介绍', time: '10:32' }
      ]
    }
  },
  computed: {
    circleProgress() {
      const radius = 40
      const circumference = 2 * Math.PI * radius
      const offset = circumference - (this.progress / 100) * circumference
      return `${circumference} ${offset}`
    }
  },
  methods: {
    showToast(type) {
      const configs = {
        success: { title: '操作成功', icon: 'success' },
        error: { title: '操作失败', icon: 'error' },
        warning: { title: '警告信息', icon: 'none' },
        info: { title: '提示信息', icon: 'none' }
      }
      uni.showToast(configs[type])
    },
    showLoading() {
      uni.showLoading({
        title: '加载中...'
      })
      setTimeout(() => {
        uni.hideLoading()
      }, 2000)
    },
    hideLoading() {
      uni.hideLoading()
    },
    showLoadingWithText() {
      uni.showLoading({
        title: '正在处理...',
        mask: true
      })
      setTimeout(() => {
        uni.hideLoading()
      }, 3000)
    },
    showAlert() {
      uni.showModal({
        title: '警告',
        content: '这是一个警告对话框',
        showCancel: false,
        confirmText: '确定'
      })
    },
    showConfirm() {
      uni.showModal({
        title: '确认',
        content: '确定要执行此操作吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '已确认',
              icon: 'success'
            })
          } else {
            uni.showToast({
              title: '已取消',
              icon: 'none'
            })
          }
        }
      })
    },
    showPrompt() {
      uni.showModal({
        title: '输入',
        content: '请输入您的姓名',
        editable: true,
        placeholderText: '请输入姓名',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: `您好，${res.content}`,
              icon: 'success'
            })
          }
        }
      })
    },
    showActionSheet() {
      uni.showActionSheet({
        itemList: ['拍照', '从相册选择', '取消'],
        success: (res) => {
          const actions = ['拍照', '从相册选择']
          uni.showToast({
            title: `选择了${actions[res.tapIndex]}`,
            icon: 'none'
          })
        }
      })
    },
    showActionSheetWithCancel() {
      uni.showActionSheet({
        itemList: ['编辑', '删除', '分享'],
        success: (res) => {
          const actions = ['编辑', '删除', '分享']
          uni.showToast({
            title: `选择了${actions[res.tapIndex]}`,
            icon: 'none'
          })
        },
        fail: () => {
          uni.showToast({
            title: '已取消',
            icon: 'none'
          })
        }
      })
    },
    showNotificationBar(type) {
      const configs = {
        success: {
          type: 'success',
          title: '操作成功',
          desc: '您的操作已成功完成',
          icon: '✓'
        },
        error: {
          type: 'error',
          title: '操作失败',
          desc: '请检查网络连接后重试',
          icon: '✕'
        },
        warning: {
          type: 'warning',
          title: '警告',
          desc: '请注意相关风险',
          icon: '⚠'
        },
        info: {
          type: 'info',
          title: '提示',
          desc: '这是一条重要信息',
          icon: 'ℹ'
        }
      }
      
      const config = configs[type]
      this.notificationType = config.type
      this.notificationTitle = config.title
      this.notificationDesc = config.desc
      this.notificationIcon = config.icon
      this.showNotification = true
      
      setTimeout(() => {
        this.hideNotification()
      }, 3000)
    },
    hideNotification() {
      this.showNotification = false
    },
    startProgress() {
      this.progress = 0
      const timer = setInterval(() => {
        this.progress += 10
        if (this.progress >= 100) {
          clearInterval(timer)
          uni.showToast({
            title: '进度完成',
            icon: 'success'
          })
        }
      }, 200)
    },
    resetProgress() {
      this.progress = 0
    },
    loadData() {
      this.showEmpty = false
      this.dataList = ['数据项 1', '数据项 2', '数据项 3', '数据项 4', '数据项 5']
      uni.showToast({
        title: '数据加载完成',
        icon: 'success'
      })
    },
    sendMessage() {
      if (this.newMessage.trim()) {
        this.messages.push({
          type: 'sent',
          text: this.newMessage,
          time: new Date().toLocaleTimeString().slice(0, 5)
        })
        this.newMessage = ''
        
        // 模拟回复
        setTimeout(() => {
          this.messages.push({
            type: 'received',
            text: '收到您的消息',
            time: new Date().toLocaleTimeString().slice(0, 5)
          })
        }, 1000)
      }
    }
  }
}
</script>

<style scoped>
.page-header {
  text-align: center;
  margin-bottom: 40rpx;
}

.page-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
}

.page-desc {
  font-size: 26rpx;
  color: #666;
}

.demo-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

/* 通知栏 */
.notification-demo {
  position: relative;
}

.notification {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  animation: slideDown 0.3s ease-out;
}

.notification.success {
  background: #d4edda;
  border-left: 4rpx solid #28a745;
}

.notification.error {
  background: #f8d7da;
  border-left: 4rpx solid #dc3545;
}

.notification.warning {
  background: #fff3cd;
  border-left: 4rpx solid #ffc107;
}

.notification.info {
  background: #d1ecf1;
  border-left: 4rpx solid #17a2b8;
}

.notification-icon {
  margin-right: 15rpx;
  font-size: 32rpx;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 5rpx;
}

.notification-desc {
  font-size: 24rpx;
  color: #666;
}

.notification-close {
  width: 40rpx;
  height: 40rpx;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-icon {
  font-size: 24rpx;
  color: #666;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 进度条 */
.progress-demo {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.progress-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.progress-label {
  width: 150rpx;
  font-size: 26rpx;
  color: #333;
  flex-shrink: 0;
}

.progress-bar {
  flex: 1;
  height: 8rpx;
  background: #e9ecef;
  border-radius: 4rpx;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #007aff;
  border-radius: 4rpx;
  transition: width 0.3s ease;
}

.progress-text {
  width: 80rpx;
  text-align: right;
  font-size: 24rpx;
  color: #666;
}

.progress-circle {
  position: relative;
  width: 120rpx;
  height: 120rpx;
}

.circle-bg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #e9ecef;
}

.circle-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(#007aff 0deg, #007aff var(--progress, 0deg), #e9ecef var(--progress, 0deg));
}

.circle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24rpx;
  font-weight: 600;
  color: #333;
}

.progress-actions {
  display: flex;
  gap: 20rpx;
}

/* 骨架屏 */
.skeleton-demo {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.skeleton-card, .content-card {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
}

.skeleton-avatar, .content-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.skeleton-avatar {
  background: #e9ecef;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

.content-avatar {
  background: #007aff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-text {
  color: white;
  font-size: 32rpx;
  font-weight: bold;
}

.skeleton-content, .content-text {
  flex: 1;
}

.skeleton-line {
  height: 20rpx;
  background: #e9ecef;
  border-radius: 4rpx;
  margin-bottom: 15rpx;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

.skeleton-title {
  width: 60%;
}

.skeleton-desc {
  width: 80%;
}

.skeleton-desc.short {
  width: 50%;
  margin-bottom: 0;
}

.content-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10rpx;
}

.content-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
}

@keyframes skeletonPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* 空状态 */
.empty-demo {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.empty-state {
  text-align: center;
  padding: 60rpx 20rpx;
}

.empty-icon {
  font-size: 120rpx;
  margin-bottom: 30rpx;
}

.empty-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 15rpx;
}

.empty-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 30rpx;
}

.data-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.data-item {
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 8rpx;
  font-size: 26rpx;
  color: #333;
}

/* 消息气泡 */
.message-demo {
  display: flex;
  flex-direction: column;
  height: 400rpx;
}

.message-list {
  flex: 1;
  overflow-y: auto;
  padding: 20rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.message-item {
  display: flex;
  align-items: flex-end;
  margin-bottom: 20rpx;
}

.message-item.sent {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: #007aff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 15rpx;
  flex-shrink: 0;
}

.message-content {
  max-width: 70%;
}

.message-bubble {
  padding: 15rpx 20rpx;
  border-radius: 20rpx;
  margin-bottom: 8rpx;
}

.message-item.received .message-bubble {
  background: white;
  border-bottom-left-radius: 8rpx;
}

.message-item.sent .message-bubble {
  background: #007aff;
  border-bottom-right-radius: 8rpx;
}

.message-text {
  font-size: 26rpx;
  color: #333;
}

.message-item.sent .message-text {
  color: white;
}

.message-time {
  font-size: 20rpx;
  color: #999;
  text-align: center;
}

.message-input {
  display: flex;
  align-items: center;
  gap: 15rpx;
  padding: 20rpx;
  background: white;
  border-radius: 12rpx;
}

.input-field {
  flex: 1;
  padding: 15rpx 20rpx;
  border: 2rpx solid #e9ecef;
  border-radius: 25rpx;
  font-size: 26rpx;
}

.send-btn {
  padding: 15rpx 30rpx;
  background: #007aff;
  color: white;
  border: none;
  border-radius: 25rpx;
  font-size: 24rpx;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .button-group {
    flex-direction: column;
  }
  
  .progress-item {
    flex-direction: column;
    align-items: stretch;
  }
  
  .progress-label {
    width: auto;
    text-align: center;
  }
  
  .progress-actions {
    flex-direction: column;
  }
}
</style>
